<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <!-- 文本 -->
    <span>Message:{{msg}}</span>
    <!-- Mustache 标签将会被替代为对应数据对象上 msg 属性的值。
    无论何时，绑定的数据对象上 msg 属性发生了改变，插值处的内容都会更新 -->
    <!-- <span v-once>Message:{{msg}}</span> -->
    <!-- 通过使用 v-once 指令，你也能执行一次性地插值，
    当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定： -->
    <div id="text"></div>
    <div id="app">
        <p>{{foo}}</p>
        <button v-on:click="foo = baz">Change it</button>
    </div>
    <p id="example"></p>
    <p id="reversed">Reversed message:"{{reverseMessage()}}"</p>
</body>
<script src="./vue.js"></script>
<script src="./js.js"></script>
</html>